<!--
 * @Author: TuYongTao
 * @Date: 2021-10-29 17:02:34
 * @LastEditors: your Name
 * @LastEditTime: 2021-10-29 18:11:27
 * @Description: 
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="app"></div>
  <script>
    
    let data = {
      msg: '你好',
      age: '18'
    }
    // let vm = {}

    // function reactive(data) {
    //   Object.keys(data).forEach((key) => {
    //     Object.defineProperty(vm,key,{
    //       enumerable: true,
    //       configurable: true,
    //       get() {
    //         return data[key]
    //       },
    //       set(newVal) {
    //         if(newVal === data[key]) {
    //           return
    //         }
    //         data[key] = newVal
    //         document.getElementById('app').textContent = data[key]
    //       }
    //     })
    //   });
    // } 
    // reactive(data)
    
    // let vm = new Proxy(data,{
    //   get(target,key) {
    //     return target[key]
    //   },
    //   set(target,key,newVal) {
    //     if(target[key] === newVal) {
    //       return 
    //     }
    //     target[key] = newVal                
    //     document.getElementById('app').textContent = target[key]
    //   }
    // })
    
    class Subject {
      constructor() {
        this.observerList = []
      }

      addObs(ob) {
        if(ob && ob.update) {
          this.observerList.push(ob)
        }
      }

      notify() {
        this.observerList.forEach((ob)=>{
          ob.update()
        })
      }
      empty() {
        this.observerList = []
      }
    }

    class Observe {
      update() {
        console.log('我要update了');
      }
    }

    let sub = new Subject()
    let ob1 = new Observe()
    let ob2 = new Observe()
    sub.addObs(ob1)
    sub.addObs(ob2)

    sub.notify()



    
    

  </script>
</body>

</html>